<template>
	<view class="container">
		<view class="box">
			<view class="title">个人信息</view>
			<view class="imgName">
				<span>头像</span>
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="userName">
				<span>用户名</span><span>宋春磊</span>
			</view>
		</view>
		<view class="box">
			<view class="title">系统信息</view>
			<view class="userName" @click="JumpPassword">
				<span>修改密码</span><span class="span"></span>
			</view>
			<view class="userName">
				<span>缓存</span><span class="span">0.24M</span>
			</view>
		</view>
		<view class="box">
			<view class="title">登录方式(只对本机有效)</view>
			<view class="userName">
				<span>TouchID或FaceID</span>
				<switch checked @change.self="switchChange" color="#65C468" style="transform:scale(0.9)"/>
			</view>
			<view class="userName" @click="JumpHand()">
				<span>手势</span><span class="span"></span>
			</view>
		</view>
		<button type="primary" @click="exitLogin()">退出登录</button>
	</view>
</template>

<script setup>
	import {ref,computed,reactive} from 'vue';
	import {onLoad,onShow} from "@dcloudio/uni-app"
	const switchChange = (e) =>{
		console.log(e.detail.value,'eee');
	}
	//修改密码
	const JumpPassword = () =>{
		uni.navigateTo({
			url:"/pages/ChangePassword/ChangePassword",
		})
	}
	// 录入手势
	const JumpHand = () => {
		// console.log("val", val);
		// if (val) {
			uni.navigateTo({
				url:"/pages/SetGesturePWD/SetGesturePWD",
			})
		// } else {
		//   localStorage.removeItem("pwd");
		// }
	}
	// 退出登陆
	const exitLogin = () => {
		let gesturePwd = localStorage.getItem("pwd");
		if (gesturePwd) {
			localStorage.setItem("exitLogin", true);
			console.log(gesturePwd);
		}
		localStorage.removeItem("pwd");
		localStorage.removeItem("userObj");
		uni.reLaunch({
			url: '/pages/login/login'
		});
	
	}
</script>

<style lang="scss" scoped>
.box{
	.title{
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 20rpx;
		color: #fff;
		font-weight: bold;
		background-color: #e6e6e6;
		opacity: 0.75;
	}
	.imgName{
		display: flex;
		justify-content: space-between;
		align-items: center;
	  margin: 0 25rpx;
		border-bottom: 1px solid #d4d4d4;
		image{
			width: 250rpx;
			height: 250rpx;
			border-radius: 50%;
			overflow: hidden;
			vertical-align:middle;
		}
		span{
			font-size: 35rpx;
			font-weight: bold;
		}
	}
	.userName{
			margin:0 25rpx;
			height: 90rpx;
			line-height: 90rpx;
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			border-bottom: 1px solid #f3f3f3;
			span:nth-child(2){
				color:#BEBEBE;
				font-weight: normal;
			}
			.span::after{
				content: '>';
				color: #BEBEBE;
				margin-left: 30rpx;
			}
	}
}
button {
	width: 80%;
	height: 90rpx;
	line-height: 90rpx;
	margin: 100rpx auto;
	font-size: 32rpx;
	background-color:#EE9845;
}
</style>
